<%@ page  language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>注册</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	*{ margin:0 auto; font-size:12px;}
	#r_uname{width:200px;height:20px;padding-left:5px;vertical-align:middle;}
	#r_psw{width:200px;height:20px;padding-left:5px;vertical-align:middle;}
	
	#pwdEror{background:url(../image/img/error.gif) no-repeat;padding-left:33px;text-align:left;
	height:17px;line-height:17px;display:none;color:red;line-height:17px;}
	#r_psw2{width:200px;height:20px;padding-left:5px;vertical-align:middle;}
	
	#pwdEror2{ background:url(../image/img/error.gif) no-repeat;padding-left:33px;text-align:left;
	height:17px;line-height:17px;display:none;color:red}
	#r_mail{width:200px;height:20px;padding-left:5px;vertical-align:middle;}
	
	#mailEror{ background:url(../image/img/error.gif) no-repeat;padding-left:33px;text-align:left;
	height:17px;line-height:17px;display:none;color:red}
	#r_phone{width:200px;height:20px;padding-left:5px;vertical-align:middle;}
	
	#phoneEror{ background:url(../image/img/error.gif) no-repeat;padding-left:33px;text-align:left;
	height:17px;line-height:17px;display:none;color:red}
	#showhead{position:relative;text-align:center;vertical-align:middle;background-image:url(../image/img/view.gif);
	width:70px;height:70px;line-height:30px;  float:left;}
	#showheadimg{ font-size:12px;margin-bottom:40px; margin-left:2px;;color:#999999;}
	#sub{background-image:url(../image/img/regist2.gif);background-repeat:no-repeat;border:0px;
	width:90px;height:22px;cursor:hand; background-color: white;}
	.choose_btn{background-image:url(../image/img/sel-bg.gif);background-repeat:no-repeat;border:0px;height:20px;width:80px;
	line-height:19px;padding-left:6px;margin-left:40px;margin-bottom:25px;color:#847F16;font-size:13px;background-color:white
	cursor:hand;}
	#h_img{border:2px solid #9F9C0A;background-color:#FFF;width:220px;
	height:150px;position:absolute;left:0px;top:0px;z-index:2;display:none;}
	#d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d10,#d11,#d12,#d13,#d14,#d15{float:left;width:42px;
	height:50px;filter:alpha(opacity=50);z-index:3;cursor: hand;}
	input{width: 160px;height: 20px;border-color:olive;border-style:solid;border-width: 1px;
	line-height:20px; text-align: left;vertical-align: middle;}	
	#my_right{width:40%; height:500px; border:#0000CC dotted 1px; float:left}
	#my_rtop{width:100%; height:60px; border-bottom:#CCCCCC dotted 2px;}
	.sp2{font-size:16px; font-weight:bold; position:relative; top:-20px; color:#00CCFF;}
	#my_pics{ width:22%; height:80px; float:left; padding-left:9px; padding-top:5px;}
	#re_tabb tr{height:30px; }
	
	
	</style>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/base.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/register.js"></script>
  </head>
  
  <body>
   <jsp:include page="top.jsp"></jsp:include>
  <!-- 中间部分开始 -->
  <div style="width:70%;">
    <div style="width:59.5%; height:500px; border:1px solid #84DBFF; float:left;">
		<!-- toubu -->
		<div style="width:100%; height:20px; float:left;">
	    	<img src="../image/img/icon.gif"/>
	    	<span style="color:#C0C0C0; font-size:18px; font-weight:bold;">欢迎注册爱音乐</span>
	     	
	    </div>
	    <div>&nbsp;</div>
	    <div>&nbsp;</div>
	    <div>&nbsp;</div>
		<!--表格div-->
	    <div id="reg-tab" style="width:100%; height:350px; ">
	    	<form action="/music/user/registFrom.do" method="post" >
	        <table id="re_tabb" border="0" cellpadding="0" cellspacing="0" width="580" height="380">
	        	 <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	        	<tr style="border-bottom:1px solid red;">
	                <td style="font-size:13px;text-align:right;width:120px;">用户名：</td>
	                <td width="200"><input type="text" name="user_name" id="r_uname"></td>
	                <td id="unameEror" style="width:230px;"></td>
	       	   </tr>
	       	   <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	          	<tr>
	        	  <td style="font-size:13px;text-align:right;width:120px;">密码：</td>
	              <td><input type="password" name="password" id="r_psw"></td>
	              <td id="pwdEror"></td>
	           </tr>
	         	<tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	         <tr>
	        	<td style="font-size:13px;text-align:right;width:120px;">确认密码：</td>
	            <td width="200"><input type="password" name="password2" id="r_psw2"></td>
	            <td id="pwdEror2"></td>
	        </tr>
	           <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
			 <tr>
	        	<td style="font-size:13px;text-align:right;width:120px;">常用邮箱：</td>
	            <td><input type="text" name="email" id="r_mail"></td>
	            <td id="mailEror"></td>
	        </tr>
	           <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	         <tr>
	        	<td style="font-size:13px;text-align:right;width:120px;">手机号：</td>
	            <td><input type="text" name="phone" id="r_phone" style="float:left;width:150px;"><input type="button" value="验证码" style="float:left; width:50px; cursor:hand;"/></td>
	            <td id="phoneEror"></td>
	        </tr>  
	           <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	          <tr>
	        	<td style="font-size:13px;text-align:right;width:120px;">性别：</td>
	            <td colspan="2">
	            <input type="radio" name="sex" value="男" id="sex" checked="checked" style="width: 30px; border: 0px;">男
	            <input type="radio" name="sex" value="女" id="sex" style="width: 30px; border: 0px;">女	
	            </td>
	        </tr>  
	           <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	         <tr height="150px">
				<td style="font-size:13px;text-align:right;width:120px;">头像：</td>
	            <td style="border:#FFF solid 1px;">
	            	<div id="showhead">
	            	  <div id="showheadimg" >头像预览</div>
	            	</div>
	            	<input type="button" value="选择头像" class="choose_btn" id="showImgBtn" style="cursor:hand; padding-left:20px; "/>
	            </td>
	            <!--选择头像-->
				<td style="position: relative">
	            	<div id="h_img">
	                	<!-- <c:forEach begin="1" end="15" step="1" varStatus="status">
	                		<div id="d${status.index }" onMouseDown="show_img(${status.index })" onmouseover="showfilter('d${status.index }')" onmouseout="hiddenFikter('d${status.index }')">
	                		 <img src="image/user/${status.index }.gif" style="width:40px; height:45px; float: left;">
	                	   </div>
	                	</c:forEach> -->
						 	
	                </div>
	            </td>
	         </tr>
	           <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	        <tr style="height:50px;">
	        	<td colspan="3">
	            	 <div id="r-agreeck" style="text-align:center; font-size:12px;">
	        	       <input type="checkbox" name="ck" id="r_ck" style="width: 20px; border: 0px;">
			        		  我已阅读并同意《爱音乐网站用户注册协议》&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	               </div>
	            </td>
	        </tr>
	         <tr style="height:5px;">
	       	   		<td colspan="3"><hr width="80%" style="border:1px dotted #CCCCCC"/></td>       	   
	       	   </tr>
	        <tr>
	        <td colspan="3">
	        	<div style="text-align:center; margin-top:5px;">
			      <input type="submit" name="sub" id="sub" value="" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			      <input type="hidden" value="" name="head" id="r_hi">
			      <input type="hidden" value="" name="user_id" id="r_hi_id">
	          </div>	 
	         </td>
	       </tr>
	      
	          </table>
	        </form>
    	</div>
    </div>
    
    <div id="my_right">
		<div id="my_rtop" >
			<img src="../image/img/my-t.jpg" style="width:50px; height:50px;"/>
			<span class="sp2">享心情&nbsp;&nbsp;&nbsp;&nbsp;爱音乐</span>  
		</div>
		<!-- 
		<c:forEach begin="1" end="20" varStatus="status">
			<div id="my_pics">
			  <img src="image/img/my-index${status.index }.jpg" width="80" height="80"/>
		    </div>
		</c:forEach> -->
		
	</div>
 </div>
    
    <div style="clear:both;"></div>
    

    <!-- 中间部分结束 --> 
     <jsp:include page="bottom.jsp"></jsp:include>
    
  </body>
</html>
